<template>

  <view class="componet" v-if="visbole" @tap="click_panel">
    <view class="componet-form" @tap.stop="click_null">
      <view class="title"><text>{{title}}</text></view> 
      <scroll-view class="componet-scroll" scroll-y>
        <view class="text" v-if="text.length>0" :style="center?'text-align:center':''"><text>{{text}}</text></view>
      </scroll-view>

      <view class="foot-btn">

        <block v-if="mode=='yesno'" >
			<view class="btn btn1" hover-class="hover" @tap="click_no"><text>{{noText}}</text></view>

			<view class="btn btn3" v-if="!agreement_state">
				<text>{{info.yes?info.yes:word.msgbox_yes}}</text>
			</view>
			<view class="btn btn2" v-if="agreement_state" hover-class="hover" @tap="click_yes">
				<text>{{info.yes?info.yes:word.msgbox_yes}}</text>
				<button v-if="open_type" show-message-card class="button" :open-type="open_type" @tap="click_yes" @opensetting="click_open_type" @error="click_error" @getphonenumber="click_open_type" @contact="click_open_type" @getuserinfo="click_open_type"></button>
			</view>
        </block>
		<view v-else class="btnok btn2" hover-class="hover" @tap="click_ok">
		    <text>{{okText}}</text>
		    <button v-if="open_type" class="button" :open-type="open_type" @tap="click_ok" @opensetting="click_open_type" @error="click_error" @getphonenumber="click_open_type" @contact="click_open_type" @getuserinfo="click_open_type"></button>
		</view>
      </view>
    </view>
  </view>


</template>

<script>
	// import base from "./base.js";
	// let lib = new base('msgbox');
	export default{
		data(){
			return{
				visbole:false,
				text:'sssss',
				title:'msg',
				noText:'no',
				yesText:'yes',
				okText:'ok',
				center:true,
				mode:'yesno',
				open_type:'',
				agreement_state:true,
			};
		},
		props:{
			info:{ type:Object },
			word:{ type:Object },
		},
		methods:{
			basic:function(param = {}){
				return lib.basic(param);
			},
			show:function(param = {}){
				return lib.show(param);
			},
			hide:function(param = {}){
				return lib.hide(param);
			},
			runSuccess:function(param = {}){
				let data = this.basic();
				console.log(data)
				if (data.success&&data.success(param) == false) return;
				if (data.complete&&data.complete(param) == false) return;
				this.hide();
			},
			runFail:function(param = {}){
				let data = this.basic();
				if (data.fail&&data.fail(param) == false) return;
				if (data.complete&&data.complete(param) == false) return;
				this.hide();
			},
			runAgreement:function(param = {}){
				let data = this.basic();
				if (data.agreement&&data.agreement(param) == false) return;
				if (data.complete&&data.complete(param) == false) return;
				this.hide();
			},
			click_null:function() {},
			click_panel:function() {
			    this.runFail({click:'panel'});
			},
			click_error:function() {
				this.runFail({click:'error'});
			},
			click_open_type:function(e) {
				this.runSuccess({click:'open_type'});
			},
			click_ok:function() {
				this.runSuccess({click:'ok'});
			},
			click_no:function() {
				this.runFail({click:'no'});
			},
			click_yes:function() {
				this.runSuccess({click:'yes'});
			},
		},
	}
</script>

<style>
.componet{
  width: 750rpx;
  height: 100vh;
  background: rgba(0, 0, 0, .65);
  z-index: 500;
  top: 0;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.componet .hover{
  opacity: 0.8;
  background: rgba(0, 0, 0, .02);
}
.componet .inputbox-form{
  margin-bottom: 50vh;
}
.componet .componet-form{
  border-radius: 15rpx;
  width: 650rpx;
  align-content: center;
  background: #fff;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, .5);
  animation: show_componet 0.15s;
  overflow: hidden;
}
@keyframes show_componet{
from{
  margin-top: 100vh;
  }
to{
   margin-top: 0;
  }
}
.componet .componet-form .componet-scroll{
  max-height: 65vh;
}

.componet .componet-form .title{
  direction: rtl;
  display: flex;
  justify-content: center;
  padding-bottom:30rpx;
  padding-top:65rpx;
  font-size: 32rpx;
  color: #ff4c75;
}
.componet .componet-form .text{
  /* text-align: center; */
  white-space: normal;
  line-height: 50rpx;
  padding: 5rpx 50rpx;
  display: flex;
  /* text-align: center; */
  justify-content: center;
  font-size: 28rpx;
}
.componet .componet-form .msg-list{
  padding: 0 40rpx;
  padding-top: 20rpx;
}
.componet .componet-form .msg-list .msg-item{
  /* height: 80rpx; */
  line-height: 40rpx;
  padding: 15rpx 0;
  display: flex;
  align-items: center;
  /* background: #000; */
}
.componet .componet-form .msg-list .msg-item .msg-icon{
  width: 48rpx;
  height: 48rpx;
}
.componet .componet-form .msg-list .msg-item .msg-text{
  width: 400rpx;
  padding-right: 25rpx;
  color: #666666;
  text-align: justify;
}
.componet .componet-form .msg-list .msg-item .msg-select{
  color: #3fcf00;
}
.componet .componet-form .input-text{
  position: relative;
  align-items: center;
  height: 120rpx;
}
.componet .componet-form .input{
  direction: rtl;
  text-align: right;
  color:#333333;
  height: 60rpx;
  font-weight: 500;
  font-size: 28rpx;
  border-bottom: solid 1px #efefef;
}
.componet .componet-form .info{
  color: #9c9fa1;
}
.componet .componet-form .tag{
  white-space: nowrap;
  line-height: 50rpx;
  padding: 20rpx 35rpx;
  direction: ltr;
  font-size: 26rpx;
  color: #868e97;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-align-last: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.componet .componet-form .tag .text{
   overflow: hidden;
  text-overflow: ellipsis; 
}
.componet .agreement{
  padding-top: 35rpx;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  /* height: 44rpx; */
}
.componet .agreement .blue{
  color: #518eff;
  padding-left: 10rpx;
}
.componet .agreement .icon{
  padding-left: 10rpx;
  height: 44rpx;
  width: 44rpx;
}

.foot-btn{
  font-size: 32rpx;
  /* background: #f6f6f6; */
  height: 80rpx;
  /* width:550rpx; */
  padding: 30rpx;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.foot-btn .btn{
  position: relative;
  width: 260rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 85rpx;
  overflow: hidden;
}
.foot-btn .btn1{
  /* color: #008cff; */
  /* color: #fff; */
  /* background: linear-gradient(to left,#f75847, #f9796c); */
}
.foot-btn .btn2{
  color: #ff4c75;
  /* background: linear-gradient(to left,#24c27d, #50ce97); */
}
.foot-btn .btn3{
  color: #999999;
}
.foot-btn .btnok{
  position: relative;
  border-radius: 85rpx;
  overflow: hidden;
  width:570rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.foot-btn .button{
  opacity: 0;
  position:absolute;
  padding: 0;
  display: block;
  width:100%;
  height:100%;
}
</style>
